import * as React from 'react'
import * as Loadable from 'react-loadable'
const loading = require('../assets/loading.gif')

function Loading(props: any) {
    if (props.error) {
        return <div>Error!</div>
    } else if (props.timedOut) {
        return <div>Taking a long time...</div>
    } else if (props.pastDelay) {
        return <div className="loading flex_center"><img style={{ width: '10rem', display: 'block', margin: '0 auto' }} src={loading} /></div>
    } else {
        return <div className="loading flex_center"><img style={{ width: '10rem', display: 'block', margin: '0 auto' }} src={loading} /></div>
    }
}

export interface IRoutes {
    path: string
    component: Promise<React.ComponentClass<any> | React.StatelessComponent<any> | { default: React.ComponentType<any> }>
    login?: boolean
}

export const routes: IRoutes[] = [{
    component: import('../views/Detail'),
    path: '/detail',
    login: false
}, {
    component: import('../store/action/Category/Category'),
    path: '/category',
    login: false
}, {
    component: import('../store/action/Shop/Detail'),
    path: '/shopDetail/:id',
    login: false
}, {
    component: import('../store/action/BuyBeans'),
    path: '/buyBeans',
    login: false
}, {
    component: import('../views/BuyBeans/BeansList'),
    path: '/beans_list',
    login: false
}, {
    component: import('../views/BuyBeans/NewBeansList'),
    path: '/new_beans_list',
    login: false
}, {
    component: import('../store/action/BeansOrder'),
    path: '/beans_order/:id'
}, {
    component: import('../store/action/Shop/Cart'),
    path: '/cart'
}, {
    component: import('../views/Login'),
    path: '/loginMode',
    login: false
}, {
    component: import('../views/Login/AccountLogin'),
    path: '/account'
}, {
    component: import('../views/Login/UserRegister'),
    path: '/userRegister',
    login: false
}, {
    component: import('../views/Login/RecoveredPsw'),
    path: '/resetPassword'
}, {
    component: import('../store/action/Shop/FillOrder'),
    path: '/fillOrder'
}, {
    component: import('../views/Login/MobilePhoneLogin'),
    path: '/mobileLogin',
    login: false
}, {
    component: import('../store/action/Shop/SelectPay'),
    path: '/selectPay'
}, {
    component: import('../views/Shop/PayFinish'),
    path: '/payFinish/:orderId/:type'
}, {
    component: import('../store/action/Detatil/ShopBus'),
    path: '/shop_bus/:id',
    login: false
}, {
    component: import('../views/My'),
    path: '/my'
}]

export const loadable = (component: Promise<React.ComponentClass<any> | React.StatelessComponent<any> | { default: React.ComponentType<any> }>) => {
    return Loadable({
        delay: 2000,
        loader: () => component,
        loading: Loading,
        timeout: 10000
    })
}